﻿import QtQuick 2.9
import QtQuick.Controls 2.9
import QtQuick.Controls.Basic

// Fork from Qt Assistant
Rectangle {
    id: root
    width: 120
    height: 30
    property alias combobox: control
    property alias currentIndex: control.currentIndex
    property alias currentText: control.currentText
    property alias model: control.model
    property alias textRole: control.textRole
    property alias enabled: control.enabled
    property alias pressed: control.pressed

    // define signals
    signal activated(int index)

    // debug
    property string tag: "[MyComboBox]: "
    property string idname: ""
    property bool is_debug: false

    ComboBox {
        id: control
        property real popup_height: 5 * bg_rect.implicitHeight

        font.family: "Segoe UI Semibold"

        model: ["First", "Second", "Third", "First", "Second", "Third"]

        delegate: ItemDelegate {
            id: delegate

            required property var model
            required property int index

            width: control.width
            height: bg_rect.implicitHeight
            contentItem: Text {
                text:   delegate.model[control.textRole] // modelData
                color: "#595959"
                font: control.font
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
            }
            highlighted: control.highlightedIndex === index
            background: Rectangle {
                id: itemdelegate_bg_rect
                color: "#fbfbfb"
                radius: 8
            }

            PropertyAnimation {
                id: itemdelegate_mouse_entered_animation
                target: itemdelegate_bg_rect
                property: "color"
                from: "#fbfbfb"
                to: "#f2f2f2"
                duration: 200
            }
            PropertyAnimation {
                id: itemdelegate_mouse_exited_animaition
                target: itemdelegate_bg_rect
                property: "color"
                from: "#f2f2f2"
                to: "#fbfbfb"
                duration: 200
            }

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                // enabled: false
                onEntered: {
                    // if(is_debug) console.log(tag, "onEntered index:", index)
                    // itemdelegate_bg_rect.color = "#f2f2f2"
                    itemdelegate_mouse_entered_animation.start()
                }
                onExited: {
                    // if(is_debug) console.log(tag, "onExited index:", index)
                    // itemdelegate_bg_rect.color = "#fbfbfb"
                    itemdelegate_mouse_exited_animaition.start()
                }
                onPressed: {
                    itemdelegate_bg_rect.color = "#e3e3e3"
                }
                onClicked: {
                    if(is_debug) console.log(tag, "onClicked index:", index)
                    control.currentIndex = index
                    combobox_popup.close()
                }
            }

        }

        indicator: Canvas {
            id: canvas
            x: control.width - width - control.rightPadding
            y: control.topPadding + (control.availableHeight - height) / 2
            width: 12
            height: 8
            contextType: "2d"

            Connections {
                target: control
                function onPressedChanged() { canvas.requestPaint(); }
            }

            onPaint: {
                context.reset();
                context.moveTo(0, 0);
                context.lineTo(width, 0);
                context.lineTo(width / 2, height);
                context.closePath();
                context.fillStyle = "#86dbce";
                context.fill();
            }
        }

        contentItem: Text {
            leftPadding: 5
            rightPadding: control.indicator.width + control.spacing

            text: control.displayText
            font: control.font
            color: control.enabled ? "#595959" : "#9295a0"
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }

        background: Rectangle {
            id: bg_rect
            implicitWidth: root.width
            implicitHeight: root.height
            border.color: "#dfffef" //"#ececec"
            border.width: 2 //control.visualFocus ? 2 : 1
            radius: 8
            color: "#fbfbfb"

            PropertyAnimation {
                id: mouse_entered_animation
                target: bg_rect
                property: "color"
                from: "#fbfbfb"
                to: "#f2f2f2"
                duration: 200
            }
            PropertyAnimation {
                id: mouse_exited_animation
                target: bg_rect
                property: "color"
                from: "#f2f2f2"
                to: "#fbfbfb"
                duration: 200
            }
            MouseArea {
                id: bg_rect_mouseArea
                anchors.fill: parent
                // propagateComposedEvents: true
                hoverEnabled: true
                onEntered: {
                    // if (is_debug) console.log(tag, "onEntered")
                    if (control.enabled === true) {
                        mouse_entered_animation.start()
                    }
                }
                onExited: {
                    // if (is_debug) console.log(tag, "onExited")
                    if (control.enabled === true) {
                        mouse_exited_animation.start()
                    }
                }
            }
        }

        popup: Popup {
            id: combobox_popup
            y: control.height - 1
            width: control.width
            implicitHeight: contentItem.implicitHeight
            padding: 2
            contentItem: ListView {
                anchors.centerIn: parent
                clip: true
                implicitHeight: contentHeight
                model: control.popup.visible ? control.delegateModel : null
                currentIndex: control.highlightedIndex
                ScrollBar.vertical: ScrollBar { }
            }
            background: Rectangle {
                border.color: "#dfffef" // "#ececec"
                border.width: 2
                radius: 8
            }

            PropertyAnimation {
                id: popup_show_animation
                target: combobox_popup
                property: "height"
                from: 0
                to: control.popup_height
                duration: 1000
                easing.type: Easing.OutElastic
            }
            onAboutToShow: {
                // if (is_debug) console.log(tag, "onAboutToShow, popup_show_animation.start()")
                // popup_show_animation.start()
            }

            Component.onCompleted: {
                if(is_debug) console.log(tag, "Combobox popup loaded, height:", height, "contentHeight:", contentHeight)
            }
        }

        // onAccepted: {
        //     if (find(editText) === -1)
        //         model.append({text: editText})
        // }
    }

}
